<template>
  <div>
    <breadcrumb :items="breadcrumbs" />
    <a-card class="Pcard-box">
      <tabs @change="tabChange" :items="tabs" v-if="tabs.length > 0" />
      <slot />
      <a-affix :offset-bottom="0" style="width: 100%" v-if="actions">
        <a-row class="title-box2">
          <a-col :span="24" style="text-align:center;line-height: 60px">
            <a-button v-if="isBackBtn" @click="goBack">返回</a-button>
            <action-btns :btns="actionBtns" @click="btnClick" />
            <slot name="actionBtns" />
          </a-col>
        </a-row>
      </a-affix>
    </a-card>
  </div>
</template>

<script>
import ActionBtns from '@/components/base/ActionBtns'
import Breadcrumb from '@/components/base/Breadcrumb'
import Tabs from '@/components/base/Tabs'

export default {
  components: { Breadcrumb, ActionBtns, Tabs },
  props: {
    breadcrumbs: {
      type: Array,
      default: () => []
    },
    tabs: {
      type: Array,
      default: () => []
    },
    actionBtns: {
      type: Array,
      default: () => []
    },
    isBackBtn: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    actions () {
      return (
        this.isBackBtn || this.actionBtns.length > 0 || this.$slots.actionBtns
      )
    }
  },
  methods: {
    btnClick (key) {
      this.$emit('click', key)
    },
    tabChange (key) {
      this.$emit('tabChange', key)
    },
    goBack () {
      this.$router.go(-1)
    }
  }
}
</script>

<style></style>
